<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订阅_墨阅小说</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/moyue/css/loginortop.css}"  rel="stylesheet">
    <link th:href="@{/moyue/css/book.css}"  rel="stylesheet">
    <link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/moyue/images/favicon.ico}" type="image/x-icon"/>
    <!--<style th:inline="text/css">-->
        <!--a{color: #3f5a93;}-->
        <!--a:hover{color: #3f5a93;}-->
    <!--</style>-->
</head>
<body style="background-color: #fff;">
<div class="navs" id="div1">
    <div class="navs-top">
        <div class="navs-top-left">
            <ul>
                <div class="top-left-one"><a th:href="@{/moyue/user/index}" target="" style="font-size: 20px;">墨阅小说网</a></div>
                <li><a href="xuanhuan.html" target="" >玄幻</a></li>
                <li><a href="dushi.html" target="" >都市</a></li>
                <li><a href="xianxia.html" target="">仙侠</a></li>
                <li><a href="kehuan.html" target="" >科幻</a></li>
                <li><a href="youxi.html" target="" >游戏</a></li>
                <li><a href="lishi.html" target="" >历史</a></li>
                <li><a href="rank.html" target="_blank" >排行</a></li>
                <li class="more"><a href="javascript:" id="top-nav-more" target="" >更多<span></span></a>
                    <div class="top-left-dropdown"><a href="all.html" target="_blank" >全部作品</a>
                        <a href="2cy.html" target="" >二次元</a>
                        <a href="qihuan.html" target="" >奇幻</a>
                        <a href="wuxia.html" target="" >武侠</a>
                        <a href="lingyi.html" target="" >灵异</a>
                        <a href="junshi.html" target="" >军事</a>
                        <a href="xianshi.html" target="" >现实</a>
                        <a href="tiyu.html" target="" >体育</a>
                        <a href="duanpian.html" target="">短篇</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="navs-top-right">
            <div class="top-right-shou">
                <input placeholder="斗罗大陆">
                <i class="fa fa-search" style="margin-left: 10px;cursor:pointer"></i>
                &nbsp;&nbsp;|
            </div>
            <div class="top-right-myhone">
                <div class="myhone" th:if="${session.user}==null">
                    <span onclick="upup()">登录</span>&nbsp;&nbsp;
                    <span><a th:href="@{/moyue/user/registerUI}">注册</a> </span>
                </div>
                <div class="mylanded" th:if="${session.user}!=null">
                    <a th:href="@{/moyue/user/myhomehtml}"><span th:each="user : ${session.user}" th:text="${user.userName}"></span></a>
                    <div class="mylanded-y">
                        <a th:href="@{/moyue/user/myhomehtml}">个人中心</a>
                        <a th:href="@{/moyue/user/safetyhtml}">安全中心</a>
                        <a th:href="@{/moyue/book/bookcaselist}">我的书架</a>
                        <a th:href="@{/moyue/user/outlogin}">退出登录</a>
                    </div>
                </div> &nbsp;
                &nbsp;|
                <div class="mybook">
                    <a href="#"><i class="iconfont" style="font-size: 25px">&#xe60a;</i><span style="line-height: 30px">我的书架</span></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="back"></div>
<div id="denglu">
    <div class="denglu-login">
        <div class="denglu-close" onclick="closes()"><i class="fa fa-close"></i></div>
        <div class="login-top">
            <div class="login-top-one">账号登陆</div>
        </div>
        <div class="login-center">关于墨阅网将实行<a href="#">手机绑定实名制的说明</a>
        </div>
        <input placeholder="手机/邮箱/用户名" id="user">
        <input placeholder="密码" id="password" type="password">
        <div class="self-motion">
            <input type="checkbox" style="width: 15px;height: 15px;margin: 0px">
            <span>下次自动登录</span>
        </div>
        <a th:href="@{/moyue/user/forgetPwdUI}" target="_blank" class="wangji">忘记密码</a>
        <a href="#"><div class="denglu-button" onclick="login()">登陆</div></a>
        <div class="denglu-three">
            <p>使用第三方账号登录</p>
            <div class="three-ss">
                <a href="javascript:;" class="three-ss-qq" style="background-color: #FF0036;font-size:25px;"><i class="fa fa-weibo" title="新浪微博"></i></a>
                <a href="https://github.com/login/oauth/authorize?client_id=6c861c60eb9fd46cfc6d" class="three-ss-qq" style="background-color: #111111;font-size: 25px" methods="get"><i class="fa fa-github" title="GitHub"></i> </a>
                <a href="javascript:;" class="three-ss-qq" style="background-color: #0a6397;font-size: 25px"><i class="fa fa-qq" title=""></i> </a>
                <a href="javascript:;" class="three-ss-qq" style="background-color: #419641;font-size: 25px"><i class="fa fa-linkedin" title=""></i> </a>
            </div>
            <p style="margin-top: 70px;padding-top: 10px;border-top: 1px solid #D1CCC7;">没有账号？<a th:href="@{/moyue/user/registerUI}" target="_blank" style="color: #36a803;">立即申请</a></p>
        </div>
    </div>
</div>
<div class="top-content">
    <div class="top-nav">
        <div class="nav-list">
            <a th:href="@{/moyue/index}" target="_blank">首页  ></a>
            <a th:href="@{/moyue/index}" th:text="${parentype}">武侠频道 ></a>
            <a href="" th:text="${subtype}">武侠幻想 ></a>
            <a href="" th:text="${book.bookName}">逍遥派</a>
        </div>
    </div>
</div>
<div class="top-nav">
    <div class="book-detail">
        <!--第一部分-->
        <div class="book-information">
            <div class="book-img">
                <a><img th:src="@{'/moyue/Path'+${book.getBookCoverUrl()}}"/></a>
            </div>
            <div class="book-info">
                <h1>
                    <span th:text="${book.bookName}">逍遥派</span>
                    <span>
							<a href="" id="autor" th:text="${book.authorName}">北***</a>
							<span>著</span>
					</span>
                </h1>
                <div class="pag">
                    <ul>
                        <li th:if="${book.bookIsEnd}==0">连载</li><!--作品状态-->
                        <li th:if="${book.bookIsEnd}==1">完结</li><!--作品状态-->
                        <li th:if="${book.bookIsContract}==0">未签约</li><!--作品状态-->
                        <li th:if="${book.bookIsContract}==1">已签约</li><!--作品状态-->
                        <li><a href="" target="_blank" th:text="${parentype}">武侠</a></li>
                        <li><a href="" target="_blank" th:text="${subtype}">武侠</a></li>
                    </ul>
                </div>
                <p>借三尺明月，衔两袖青龙，轻剑快马恣意，携侣江湖同游！</p>
                <p>
                    <span><b>618.87</b>万字</span>
                    <span><b>144.17</b>万总点击·会员周点击540</span>
                    <span><b>25.14</b>万总推荐·周425</span>
                </p>
            </div>
            <div class="book-wrap">
                <b style="font-size: 28px;">9</b><b>.</b><b style="font-size: 24px;">0</b>
                <p style="color: #3f5a93; margin: 10px 0;">
                    <span style="position: relative; top: 5px;">96</span>人评价
                </p>
               	<hr />
               	<div style="font-size: 13px;"><a href="">升级为VIP用户 </a><span> 享受更多优惠</span></div>
            </div>
        </div>
        <!--第二部分-->
	        <div class="qwe">
	        	<div>
		        	<input type="radio" name="yes"  value="" onclick="selectAllVolume()"/>
		        	<label  style="margin: 0 18px; font-size: 18px;">选择全部章节</label>
		        	<input type="radio" name="yes"  value="" onclick="SelectNOVolume()" />
		        	<label  style="margin-left: 18px; font-size: 18px;">取消</label>
		        </div>
		        <div class="volume book-volume">
	                <h3>
	                    <div style="float: left;">VIP卷<i>.</i></div>
	                    <div class="free" style="background-color: #fc6c28;;">VIP</div>
                        <div style="float: right">
                            <p style="color: #FF0036;font-size: 16px" th:text="${isVIP}"></p>
                        </div>
	                </h3>
	                <table border="0" cellspacing="" cellpadding="">
	                	<thead>
		                    <tr>
		                    	<th class="td1">章节名称</th>
		                        <th class="td2">时间</th>
		                        <th class="td3">字数</th>
		                        <th class="td4">墨阅币</th>
		                    </tr>
	                    </thead>
	                    <tbody>
	                    	<tr th:each="booklist : ${chargebookLists}">
	                    		<td class="td1">
	                    			<input type="checkbox" name="all" th:value="${booklist.bookListId}" class="selectall" />
                                    <span th:text=" '第'+${booklist.bookListOrder}+'章 '+${booklist.bookListName}"></span>
	                    		</td>
	                    		<th class="td2" >2014-07-27 00:18:52</th>
		                        <th class="td3" th:text="${booklist.getBookListSize()}">4120</th>
		                        <th class="td4" th:text="${booklist.chapterPrice}" >20</th>
	                    	</tr>
	                    </tbody>
	                </table>
	            </div>
	        </div>
       	</div>
    </div>
    <div class="go-top">
    	<div class="bottom-wrip">
    		<div>
	        	<div style="float: left;">
	        		<input type="radio" name="all"  value="" style="" onclick="selectAllVolume()"/>
		        	<label style="margin-left: 18px; font-size: 18px;" onclick="selectAllVolume()">
		        		选择全部章节
		        	</label>
		        	<span>已选择<b class="bottom-wrip-right" id="chex"> 0</b>
		        		章,共<b style="margin: 0 12px;" class="selectnum"> </b>字</span>
	        	</div>
    			<div style="float: right;">
    				账户余额<b class="bottom-wrip-right" th:text="${account}"> </b>
    				<span style="font-size: 48px;">.</span>
                    <span>此次消费</span>
    				<b class="bottom-wrip-right" id="moyue"> 0</b>墨阅币
    				<div class="yesdingyue" onclick="yesselect()">确认订阅</div>
                    <input type="hidden" class="seleteshu">
    			</div>
    		</div>
    	</div>
    </div>
<div class="not-suff none ">
    <i class="iconfont" onclick="nosuff()">&#xe62c;</i>
    <h4>余额不足，请及时充值</h4>
    <p>当前余额<span class="suff-color suffx"></span>币，还需要<span class="suff-color suffs"></span>币</p>
    <a th:href="@{/moyue/user/payment}">充值</a>
</div>
<div class="suffback"></div>
<div class="yesselect none"></div>

</body>
<script th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/moyue/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/read.js}"></script>
</html>
